<!--商品详情-->
<template lang="html">
	<div>
		<van-nav-bar
		  class="head_top"	
		  title="商品预览"
		  left-arrow
		>		
			<van-icon name="arrow-left" slot="left" color="#333"  size="20" @click="onBackUrl"/>
			<van-icon name="weapp-nav" slot="right" color="#333" size="20" @click="showShare"/>
	    </van-nav-bar>
	    
	    <div class="wrap" @click="clickFun(5)">
           <Floor1 :data="data" :lastAccesstime="lastAccesstime"></Floor1>
           <div class="m_desc">                           
             <div>{{data.comDesc}}</div>
           </div>
           
           <div class="select" v-if="goodsLabel.length>0">
           	 <span v-for="item in goodsLabel">{{item}}</span>
           </div>
           
           <div class="m_desc_img" style="margin-top: 10px;">
           	  <img :src="item" alt="" v-for="(item,index) in data.goodsImageList"/>
           </div>
           
           
           <div class="money" style="display: flex;justify-content: space-between;margin-top: 12px;padding-bottom: 14px;">
           	  <div class="cc">
           	  	<!--<img src="../../../../static/img/lanhu/44.png" alt="" style="width: 13px;height: 13px;" v-if="data.money"/>-->
           	  	<!--<span style="color: #FF9630;font-size: 13px;margin-left: 5px;" v-if="data.money">佣金奖励</span>-->
           	  </div>
           	  <div style="color: #999;font-size: 12px;">浏览 {{data.visits}}</div>
           </div>
	    </div>
	    
	    
	    <div style="height: 10px;background: #f8f8f8;"></div>
	    
	    

	    <floor22 :data="data" @clickFun="clickFun" ref="floor22" ></floor22>
	    

	    
	    <div @click="clickFun(5)">
	       <floor43 :data="data" ></floor43>
	    </div>
	    


        <div class="inputBox" v-if="showInputBox" id="inputBox">
        	<div class="boxWrap">
	        	<div class="i3">
	        		<input type="text"
	        			style="-webkit-user-select: auto;-moz-user-select: auto;" 
	        			autocomplete="off"   
	        		    id="inputId"
	        			v-model="test"
	        			ref="inputBox"
	        			class="sendInput" :placeholder="placeholder"/>
	        	</div>
	        	<div class="i4">
	        		<span class="send" id="sendInput" @click="send">发送</span>
	        	</div>	     		
        	</div>
        </div>


	    <div class="fixFooter">
	    	<div style="display: flex;align-items: center;justify-content: flex-end;height: 100%;">
	    		<span @click="show=true">管理</span>
	    	</div>	    	
	    </div>
	    
	    
	    <div class="fixFooter" v-if="!showInputBox" :class="{active:isAbsolute}">
	    	<div class="left">
	    		<div class="left-item" @click="changePraise">
	    			<img src="../../../../static/img/lanhu/47.png" alt="" class="icon" v-if="goodsIsPraise==0"/>
	    			<img src="../../../../static/img/lanhu/50.png" alt="" class="icon" v-else/>
	    			<span>点赞</span>
	    		</div>
	    		<div class="left-item" id="dissWrap" @click="clickFun(1)">
	    			<img src="../../../../static/img/lanhu/48.png" alt="" class="icon" id="dissImg"/>
	    			<span id="diss">评论</span>
	    		</div>
	    		<div class="left-item" @click="changeCollection">
	    			<img src="../../../../static/img/lanhu/49.png" alt="" class="icon" v-if="goodsIsCollection==0"/>
	    			<img src="../../../../static/img/lanhu/51.png" alt="" class="icon" v-else/>
	    			<span>收藏</span>
	    		</div>
	    	</div>
	    	<div class="right">
		    	<div style="display: flex;align-items: center;justify-content: flex-end;height: 100%;">
		    		<span @click="show=true" class="manager">管理</span>
		    	</div>	    				    		
	    	</div>
	    </div>	    
	    
	    
	    
	    <confirm ref="confirm" @queryConfirm="queryConfirm" title="确定删除该商品吗?"></confirm> 
	    
	    
	    <van-popup v-model="show" style="border-radius:4px;">
	    	<div class="popupWrap" style="width: 300px;">
	    		<div style="border-bottom: 1px solid #e5e5e5;" @click="edit">
	    			<div style="padding: 15px 0 15px 15px;">
	    			     编辑
	    			</div>
	    		</div>
	    		<div style="border-bottom: 1px solid #e5e5e5;" @click="del">
	    			<div style="padding: 15px 0 15px 15px;">
	    			     删除
	    			</div>
	    		</div>
	    		<div style="border-bottom: 1px solid #e5e5e5;" @click="show=false">
	    			<div style="padding: 15px 0 15px 15px;">
	    			     取消
	    			</div>
	    		</div>	    		
	    	</div>
	    </van-popup>	    
	    <share ref="share" :data="data" ></share>
	</div>

</template>                                                                

<script>
import Floor1 from '_c/market/floor/floor01.vue'
import Floor22 from '_c/market/floor/floor22.vue'
import Floor42 from '_c/market/floor/floor42.vue'
import Floor43 from '_c/market/floor/floor43.vue'
import confirm from '_c/confirm.vue'
import share from '_c/share.vue'
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()
export default {
	name: 'GoodsDetail',	
	components: {
	    Floor1,Floor42,Floor43,confirm,share,Floor22
	},	
	data() {
       return {
       	    test:'',  // 评论文字:
       	    placeholder:'想跟TA说点什么呢…',// 评论框的placeholder
       	    isAbsolute:false,
       	    showInputBox:false,  // 用于绑定是否显示输入框       
            url1:this.$api+'/marketorderservice/api/v1/market/goods', // 请求商品详情的接口
            url2:this.$api+'/marketorderservice/api/v1/market/deleteGoods',//删除商品
            url4:this.$api+'/marketorderservice/api/v1/market/addDiscuss', // 发送留言
            url5:this.$api+'/marketorderservice/api/v1/market/goodsAddRelation' , // 添加点赞
       	    url6:this.$api+'/marketorderservice/api/v1/market/goodsMinusRelation',// 取消点赞     
       	    url7:this.$api+'/marketorderservice/api/v1/market/addCart',  // 添加收藏
       	    url8:this.$api+'/marketorderservice/api/v1/market/deleteCart', // 取消收藏       	    
            data:{},
            lastAccesstime:'',
            show:false,
            goodsLabel:[],
            showMoney:false,
            comId:'',
            userId:'',
            backType:'',
            goodsIsPraise:0,  // 该用户是否点赞
            goodsIsCollection:0,  // 用于绑定是否收藏
       }
	},
	methods: {
		onBackUrl(){		
			if(this.backType==1){
				this.link('/')
			}else if(this.backType==2){
				this.link('/market/manager/index')
			}else if(this.backType==3){
				let arg='[{"backType":"3"}]' 
				this.link('/market/list/myRelease',arg)
			}
			else{
				this.onClickLeft()
			}
		},
		// 点赞事件
		changePraise(){
			let num=this.goodsIsPraise
			let that=this
			let url=num>0?this.url6:this.url5
            let params={
            	userId:this.userId,
            	relationtype:1,
            	typeId:this.comId
            }
		    this.$Axios2.Post(url,params)
		    .then(function(res) {
		      let test=num>0?'已取消点赞':'点赞成功'
              that.goodsIsPraise=num>0?0:1
              that.$toast(test)
		    })			
		},
		// 收藏事件
		changeCollection(){
			let num=this.goodsIsCollection
			let that=this
			let url=num>0?this.url8:this.url7
            let params={
            	userId:this.userId,
            	goodsId:this.comId
            }
		    this.$Axios2.Post(url,params)
		    .then(function(res) {
		      let test=num>0?'已取消收藏':'收藏成功'
              that.goodsIsCollection=num>0?0:1
              that.$toast(test)
		    })			
		},							
		showShare(){
			this.$refs.share.show()
		},
	    edit(){	    	
	    	let arg='[{"comId":"'+this.comId+'"},{"backType":"3"}]' 
	    	this.link('/market/goods/release',arg)
	    },
	    // 删除操作
	    del(){
	      this.show=false	
	      this.$refs.confirm.showWin()  
	    },
	    // 确认删除
	    queryConfirm(){
	    	let that=this
		    this.$Axios2.Get(this.url2+'/'+this.comId)
		    .then(function(res) {
               that.link('/market/manager/index')
		    })		    	
	    },
	    // 获取详情信息
	    getData(){
	      	let that=this	      	
		    this.$Axios2.Get(this.url1+'/'+this.comId+'/'+this.userId)
		    .then(function(res) {
               that.data=res.data;
               if(res.data.lastAccesstime){
               	   that.lastAccesstime=that.timeago(res.data.lastAccesstime)
               }
               if(res.data.goodsLabel){
               	 that.goodsLabel=res.data.goodsLabel.split(',')
               }
               if(res.data.goodsIsPraise){
               	 that.goodsIsPraise=res.data.goodsIsPraise
               }
               if(res.data.goodsIsCollection){
               	that.goodsIsCollection=res.data.goodsIsCollection
               }               
		    })		    	
	    },	    
		clickFun(type,item){			
			if(type==1){
				this.showInputBox=true
				let that=this	
				this.isAbsolute=true
				that.$nextTick(function(){
					that.$refs.inputBox.focus();
				})														
			}
			else if(type==2){
			  	let disuid=item.disUid
				let arg='[{"userId2":"'+disUid+'"}]' 
				this.link('/market/manager/homePage',arg)					
			}
			else if(type==3){
				let disnickname=item.disNickname
				let disparentid=item.disParentid
				let disuid=item.disUid
				let disid=item.disId
                this.placeholder="回复"+disnickname                                
		    	if(disparentid!='0'){
		    		this.parentId=disparentid
		    		this.disGid=disuid
		    	}else{
		    		this.parentId=disid
		    		this.disGid=''
		    	}
				this.showInputBox=true
				let that=this
				this.isAbsolute=true
				that.$nextTick(function(){
					that.$refs.inputBox.focus();
				})										
			}
			else if(type==4){
			   	let arg='[{"comId":"'+item.comId+'"},{"type":"1"}]'
			   	let url=this.concatUrl('/market/goods/detail')
			   	this.link('/market/goods/detail',arg)				
			}		
			else if(type==5){
				this.isAbsolute=false
            	this.showInputBox=false
                this.test='' // 重置输入框
                this.parentId=0 // 重置评论级别
                this.disGid='' // 重置被评论人的ID
                this.placeholder="想跟TA说点什么呢…"				
			}
			return false
		},
	    // 发送留言
	    send(){	    	
	    	if(this.test==''){
	    		this.$toast('留言或回复不能为空')
	    		return false
	    	}
	    	let params={
	    		disTxt:this.test,
	    		disUid:this.userId,
	    		disCid:this.comId,
	    		disParentid:this.parentId,
	    		disGid:this.disGid
	    	}	    	
	      	let that=this
		    this.$Axios2.Post(this.url4,params)
		    .then(function(res) {
		       that.$toast('评论成功')
		       that.$refs.floor22.addLeaver()               
               that.test='' // 重置输入框
               that.parentId=0 // 重置评论级别
               that.disGid='' // 重置被评论人的ID
               that.showInputBox=false
               that.isAbsolute=false               
		    })
	    },		
	},
	mixins:[publicFun],//混入
	mounted() {
		this.comId=this.$router.currentRoute.query.comId;
		this.userId=this.$router.currentRoute.query.userId;
		this.backType=this.$router.currentRoute.query.backType;
		this.getData()		
	}
}
</script>

<style scoped lang="scss">
*{box-sizing: border-box;}
.wrap{padding: 10px 15px;margin-top: 50px;}
.van-nav-bar__title{font-weight: bold;}
.m_desc{font-size: 14px;margin-bottom: 10px;line-height: 1.6;}
.m_desc_img>img{width: 100%;display: block;border-radius:10px;margin-bottom: 5px;}

.cc{display: flex;justify-content: center;align-items: center;}


.inputBox{position: fixed;bottom: 0;left: 0;
height: 50px;box-sizing: border-box;
z-index: 200;width: 100%;}
.inputBox .boxWrap{width: 100%;
background: #fff;display: flex;padding: 10px 5px;}
.i1{width: 30px;height: 30px;display: flex;
justify-content: center;align-items: center;}
.icon{color: #888;}
.i2{width: 38px;height: 30px;padding-left: 8px;}
.i2>img{display: block;width: 30px;height: 30px;border-radius: 4px;}
.i3{flex: 1;padding-left: 8px;}
.i4{padding-left: 8px;}
.send{border-radius:4px;background:#ffea3f;display: inline-block;padding: 9px 9px 6px;}
.sendInput{height: 30px;border:none;border-radius: 10px;padding-left: 10px;
width: 100%;background: #fff;}

.fixFooter{position: fixed;height: 50px;background: #fff;width: 100%;bottom: 0;left: 0;padding: 0 15px;display: flex;align-items: center;z-index: 100 ;
   .left{display:flex;width:70%;align-items:center;
   .left-item{margin-right: 16px;}
   .icon{width: 13px;height: 13px;margin-right: 5px;}   
   }
   .right{flex: 1;display: flex;align-items: center;justify-content: flex-end;
     .manager{background: #FFD630;padding: 6px 15px;border-radius: 20px;font-weight: bold;}
   }
}
.fixFooter.active{position: absolute;}
.select{padding: 10px 0;display: flex;flex-wrap: wrap;
   span{background: #E5E5E5;color: 333;font-size: 12px;padding: 7px 15px;margin-right: 10px;border-radius: 20px;margin-bottom: 5px;}
}
</style>